import 'package:flutter/material.dart';
import 'package:gold/app/user_provider.dart';
import 'package:gold/model/user_model.dart';
import 'package:gold/utils/xfg_extension.dart';
import 'package:gold/widgets/http_image.dart';
import 'package:provider/provider.dart';
import 'package:pull_to_refresh_flutter3/pull_to_refresh_flutter3.dart';
import 'package:waterfall_flow/waterfall_flow.dart';
import 'package:gold/base/provider_scaffold.dart';
import 'package:gold/route/routes.dart';
import 'package:gold/route/xfg_nav.dart';
import 'package:gold/utils/res.dart';
import 'package:gold/utils/xfg_color.dart';
import 'package:gold/utils/xfg_size.dart';
import 'package:gold/widgets/common_widgets.dart';
import 'package:gold/widgets/xfg_persistent_header_delegate.dart';
import 'package:gold/widgets/xfg_text.dart';

import 'integral_mall_viewmodel.dart';

/// @description:
/// @author tangzhentao
/// @created at 21:38 2024/11/25

class IntegrationMallPage extends StatelessWidget {
  const IntegrationMallPage({super.key});

  @override
  Widget build(BuildContext context) {
    return ProviderScaffold<IntegralMallViewmodel>(
      appBar: (_) => xfgAppbar(),
        model: IntegralMallViewmodel(),
        onInit: (data) => data.loadFirst(),
        builder: (ctx, mall) => NestedScrollView(
          headerSliverBuilder: (con, __) => [
            /// 我的积分
            SliverToBoxAdapter(
              child: Container(
                margin: EdgeInsets.fromLTRB(XfgSize().size10, XfgSize().size10, XfgSize().size10, 0),
                width: double.infinity, height: XfgSize().size127,
                padding: EdgeInsets.only(left: XfgSize().size24),
                decoration: const BoxDecoration(image: DecorationImage(image: AssetImage(Res.imagesIntegralTopBg))),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    XfgText('我的积分', fontSize: XfgSize().text16, color: XfgColor.integralMy),
                    XfgText(con.select<UserProvider, UserModel>((k) => k.user).points?.toStringAsFixed(0)?? '0', fontSize: XfgSize().text50, color: XfgColor.integralValue),
                  ],
                ),
              ),
            ),
            /// tab项
            SliverPersistentHeader(
              floating: true,
              pinned: true,
              delegate: XfgPersistentHeaderDelegate(
                  child: Builder(builder: (ctx) {
                    final select = ctx.select<IntegralMallViewmodel, int>((value) => value.selectIndex);
                    return Container(
                      color: XfgColor.background,
                      alignment: Alignment.center,
                      child: SizedBox(
                        height: XfgSize().size32,
                        child: Row(
                          children: [
                            Expanded(
                              child: ListView.builder(
                                scrollDirection: Axis.horizontal,
                                itemCount: mall.categoryList.length,
                                itemBuilder: (_, index) {
                                  final tab = mall.categoryList[index];
                                  final text = tab.title?? '';
                                  if (select == index) {
                                    return Center(
                                      child: Container(
                                        margin: EdgeInsets.only(left: XfgSize().size10),
                                        height: XfgSize().size26,
                                        width: XfgSize().size16 + boundingTextSize(text, style: TextStyle(fontSize: XfgSize().text16)).width,
                                        decoration: BoxDecoration(color: XfgColor.theme, borderRadius: BorderRadius.circular(XfgSize().size26)),
                                        alignment: Alignment.center,
                                        child: XfgText(text, fontSize: XfgSize().text14, color: XfgColor.white),
                                      ),
                                    );
                                  } else {
                                    return Center(
                                      child: GestureDetector(
                                        onTap: () => mall.selectIndex = index,
                                        child: Container(
                                          margin: EdgeInsets.only(left: XfgSize().size20),
                                          child: XfgText(text, fontSize: XfgSize().text14, color: XfgColor.text2),
                                        ),
                                      ),
                                    );
                                  }
                                },
                              ),
                            ),
                            SizedBox(
                              width: XfgSize().size67,
                              child: Row(
                                mainAxisAlignment: MainAxisAlignment.center,
                                children: [
                                  Image.asset(Res.imagesIntegralSearch, width: XfgSize().size10, height: XfgSize().size10),
                                  SizedBox(width: XfgSize().size3),
                                  XfgText('搜索', fontSize: XfgSize().text14, color: XfgColor.text2),
                                ],
                              ),
                            )
                          ],
                        ),
                      )
                    );
                  }),
                  maxHeight: XfgSize().size54, minHeight: XfgSize().size54
              ),
            )
          ],
          /// 商品列表
          body: Padding(
            padding: EdgeInsets.symmetric(horizontal: XfgSize().size10),
            child: SmartRefresher(
              controller: mall.controller,
              enablePullDown: true,
              enablePullUp: true,
              onRefresh: mall.refresh,
              onLoading: mall.loadMore,
              child: WaterfallFlow.builder(
                  gridDelegate: SliverWaterfallFlowDelegateWithFixedCrossAxisCount(
                      crossAxisCount: 2, mainAxisSpacing: XfgSize().size10, crossAxisSpacing: XfgSize().size10
                  ),
                  itemCount: mall.goodsList.length,
                  itemBuilder: (_, index) {
                    final goods = mall.goodsList[index];
                    return GestureDetector(
                      behavior: HitTestBehavior.translucent,
                      onTap: () {
                        final id = goods.id;
                        if (id != null) {
                          XfgNav.pushNamed(Routes.integralGoods, arguments: id);
                        } else {
                          '商品信息缺失'.toast();
                        }
                      },
                      child: ClipRRect(
                        borderRadius: BorderRadius.circular(XfgSize().size6),
                        child: Container(
                          color: XfgColor.white,
                          child: Column(
                            children: <Widget>[
                              HttpImage(goods.coverImage, size: Size(double.infinity, XfgSize().size175)),
                              Container(
                                padding: EdgeInsets.all(XfgSize().size10),
                                alignment: Alignment.centerLeft,
                                child: XfgText(goods.name?? '', fontSize: XfgSize().text14, color: XfgColor.text1, maxLines: 2, overflow: TextOverflow.ellipsis),
                              ),
                              Padding(
                                padding: EdgeInsets.fromLTRB(XfgSize().size10, XfgSize().size8, XfgSize().size10, XfgSize().size6),
                                child: Row(
                                  children: [
                                    Expanded(
                                      child: Column(
                                        crossAxisAlignment: CrossAxisAlignment.start,
                                        children: [
                                          XfgText('${goods.pointsPrice?? '0'}积分+${goods.price?? '0'}元', fontSize: XfgSize().text14, color: XfgColor.theme),
                                          XfgText('¥${goods.marketPrice}', fontSize: XfgSize().text12, color: XfgColor.text3, decoration: TextDecoration.lineThrough),
                                        ],
                                      ),
                                    ),
                                    Container(
                                      decoration: BoxDecoration(borderRadius: BorderRadius.circular(XfgSize().size30), color: XfgColor.toExchange),
                                      width: XfgSize().size56,
                                      height: XfgSize().size30,
                                      alignment: Alignment.center,
                                      child: XfgText('去兑换', fontSize: XfgSize().text12, color: XfgColor.integralValue),
                                    )
                                  ],
                                ),
                              ),
                            ],
                          ),
                        ),
                      ),
                    );
                  }
              ),
            ),
          ),
        )
    );
  }

}
